<template>
  <px-scrollbar v-show="!isMain && isView" class="view-equip-detail">
    <px-button style="margin: 16px 0 24px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
    <div class="view-equip-title">指标信息</div>
    <div class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">指标名称</div>
          <div class="text">{{ formValue.measureName }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">指标编码</div>
          <div class="text">{{ formValue.measureCode }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">指标来源</div>
          <div class="text">{{ formValue.measureSourceDesc }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">指标单位</div>
          <div class="text">{{ formValue.measureUnitDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">保留位数</div>
          <div class="text">{{ formValue.decimalPlaces }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">指标类型</div>
          <div class="text">{{ formValue.measureTypeCodeDesc }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">生成衍生指标</div>
          <div class="text">{{ formValue.isDerivedDesc }}</div>
        </div>
        <!-- <div class="view-equip-item">
          <div class="label">衍生指标</div>
          <div class="text">{{ formValue.derivedTypeDesc?.join(",") }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">衍生指标统计周期</div>
          <div class="text">{{ formValue.statisticsCycleDesc?.join(",") }}</div>
        </div> -->
        <!-- <div class="view-equip-item">
          <div class="label">所属厂区</div>
          <div class="text">{{ formValue.facCodeDesc }}</div>
        </div> -->
        <div class="view-equip-item">
          <div class="label">监控实体类型</div>
          <div class="text">{{ formValue.monitorEntityTypeDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">监控实体</div>
          <div class="text">{{ formValue.monitorEntityIdDesc }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">监控物料</div>
          <div class="text">{{ formValue.monitorMaterialIdDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">标签</div>
          <div class="text">
            <px-tag v-for="(item, index) in formValue.measureTagsDesc" :key="index" class="mr-2">{{ item }}</px-tag>
          </div>
        </div>
      </div>
    </div>
    <div class="view-equip-title">计算信息</div>
    <div v-if="formValue.isNeedCalculate === 0" class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">是否需要计算</div>
          <div class="text">{{ formValue.isNeedCalculateDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">绑定点位</div>
          <div class="text">{{ formValue.tagCode }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">点位单位</div>
          <div class="text">{{ formValue.tagUnitDesc }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">科室</div>
          <div class="text">{{ formValue.classNameDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">物理位置信息</div>
          <div class="text">{{ formValue.positionNameAll }}</div>
        </div>
      </div>
    </div>
    <div v-else class="view-equip-wrap">
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">是否需要计算</div>
          <div class="text">{{ formValue.isNeedCalculateDesc }}</div>
        </div>
        <div class="view-equip-item large">
          <div class="label">所需点位</div>
          <div class="text">{{ formValue.tagCodes }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item plus">
          <div class="label">计算公式</div>
          <div class="text">{{ formValue.calculateFormula }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">绑定点位</div>
          <div class="text">{{ formValue.tagCode }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">需要积分点位</div>
          <div class="text">{{ formValue.integralTagCodes }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">需要作差点位</div>
          <div class="text">{{ formValue.minusTagCodes }}</div>
        </div>
      </div>
      <div class="view-equip-content">
        <div class="view-equip-item">
          <div class="label">科室</div>
          <div class="text">{{ formValue.classNameDesc }}</div>
        </div>
        <div class="view-equip-item">
          <div class="label">物理位置信息</div>
          <div class="text">{{ formValue.positionNameAll }}</div>
        </div>
      </div>
    </div>
  </px-scrollbar>
</template>
<script setup lang="ts">
import { getMeasure } from "@/api/system/measure";
import { computed, getCurrentInstance, reactive, toRefs, watch } from "vue";
// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "measureCode"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  formValue: {}
});
const { formValue } = toRefs(state);
// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && props.isView) {
    formValue.value = await getMeasure({ measureCode: props.measureCode });
  } else {
    formValue.value = {};
  }
});

// 返回主页面
const backMainPage = () => {
  emits("backMainPage");
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
</style>
